<template>
    <div>
        <div v-show="open" class="exam_list">

        </div>
        <div class="echarts" :style="{width: open ? '80%' : '100%'}">
            <el-tooltip :content="open ? '收起' : '展开'" placement="top" effect="light">
                <el-button class="button_position" :icon="open ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'" type="text" @click="open = !open"/>
            </el-tooltip>
            <div class="echarts_left">
                <!-- 折线图 -->
                <div class="lineChart-style">
                    <div id="lineChart"/>
                </div>
                <!-- 柱状图 -->
                <div class="histogram-style">
                    <div id="histogram"/>
                </div>
            </div>

            <div class="echarts_right">
                <div class="pieChart-style">
                    <!-- 饼图 -->
                    <div id="pieChart"/>
                </div>
                <div class="percentage-style">
                    <!-- 百分率 -->
                    <center>
                        <p class="percentage-title">成绩四率</p>
                    </center>

                    <percentage :values="percentageOption.data" :titles="percentageOption.titles"/>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import * as echarts from 'echarts'
import percentage from '../tool/percentage.vue'
export default {
    components:{percentage},
    data() {
        return {
            //考试搜索开关
            open: true,
            // 折线图option配置
            lineChartOption : {
                title: {
                    text: '考试人数统计'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['导尿术评分卡', '四肢骨折现场急救外固定', '《胸腔穿刺术》', '《腰椎穿刺术》', '《腹腔穿刺术》']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [40,60,100,150]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '导尿术评分卡',
                        type: 'line',
                        stack: 'Total',
                        data: [3,30,45,12]
                    },
                    {
                        name: '四肢骨折现场急救外固定',
                        type: 'line',
                        stack: 'Total',
                        data: [34,10,56,12]
                    },
                    {
                        name: '《胸腔穿刺术》',
                        type: 'line',
                        stack: 'Total',
                        data: [15,10,13,15]
                    },
                    {
                        name: '《腰椎穿刺术》',
                        type: 'line',
                        stack: 'Total',
                        data: [45,2,4,35]
                    },
                    {
                        name: '《腹腔穿刺术》',
                        type: 'line',
                        stack: 'Total',
                        data: [13,45,12,45]
                    }
                ]
            },
            // 柱状图option配置
            histogramOption:  {
                title: {
                    text: '考试人数统计'
                },
                tooltip: {},
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                dataset: {
                    source: [
                        ['product', '2015', '2016', '2017'],
                        ['Matcha Latte', 43.3, 85.8, 93.7],
                        ['Milk Tea', 83.1, 73.4, 55.1],
                        ['Cheese Cocoa', 86.4, 65.2, 82.5],
                        ['Walnut Brownie', 72.4, 53.9, 39.1],
                        ['doudou', 72.4, 73.4, 12.1]
                    ]
                },
                xAxis: { type: 'category' },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
            },
            // 饼图option配置
            pieChartOption: {
                title: {
                    text: '考试成绩占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
            percentageOption:{
                data: [54,22,67,12],
                titles: ['参考率','成材率','达标率','合格率']
            },
            lineChart: null,
            histogram: null,
            pieChart: null,
        };
    },
    created() {

    },
    mounted() {
        this.lineChartInit();
        this.histogramChartInit();
        this.pieChartInit();
    },
    methods: {
        lineChartInit() {
            // 在生命周期中挂载
            this.lineChart = echarts.init(document.getElementById('lineChart'), null,
                {width: 950, height: 400});
            this.lineChart.setOption(this.lineChartOption);
        },
        histogramChartInit() {
            // 在生命周期中挂载
            this.histogram = echarts.init(document.getElementById('histogram'), null,
                {width: 950, height: 400});
            this.histogram.setOption(this.histogramOption);
        },
        pieChartInit() {
            // 在生命周期中挂载
            this.pieChart = echarts.init(document.getElementById('pieChart'), null,
                {width: 430, height: 400});
            this.pieChart.setOption(this.pieChartOption);
        }
    },
    watch: {
        open(n,o){
            if (n){
                this.lineChart.resize({width: 950, height: 400});
                this.histogram.resize({width: 950, height: 400});
                this.pieChart.resize({width: 430, height: 400});
            }else {
                this.lineChart.resize({width: 1200, height: 400});
                this.histogram.resize({width: 1200, height: 400});
                this.pieChart.resize({width: 520, height: 400});
            }
            this.histogram.setOption(this.histogramOption,true);
            this.lineChart.setOption(this.lineChartOption,true);
            this.pieChart.setOption(this.pieChartOption,true);
        }
    }
};
</script>
<style>
.button_position{
    text-align: center;
    top: 500px;
    margin-left: -15px;
    position:fixed;
    z-index:100;
}
.exam_list{
    width: 20%;
    height: 1000px;
    border: solid 1px red;
    float: left;
}
/*------------*/
.echarts{
    height: 1000px;
    padding: 15px 15px 15px 15px;
    background-color: #E4E7ED;
    float: left;
}
.echarts_left{
    padding: 10px 10px 10px 10px;
    float: left;
    width: 68%;
    height: 950px;
    background-color: white;
}

.lineChart-style{
    margin: 0 auto 10px auto;
    width: 95%;
    height: 48%;
}

.histogram-style{
    margin: 0 auto;
    width: 95%;
    height: 48%;
}

/*---------*/
.echarts_right{
    padding: 10px 10px 10px 10px;
    float: right;
    width: 30%;
    height: 950px;
    background-color: white;
}

.pieChart-style{
    margin: 0 auto 10px auto;
    width: 95%;
    height: 48%;
}

.percentage-style{
    margin: 0 auto;
    width: 95%;
    height: 48%;
}

.percentage-title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 90px;
    color: #606266;
    text-shadow: 1px 1px 1px #bebfc3;
}

</style>
